@import (reference) "../_mixins-wln.less";

.header-wrap {
  position: relative;
  z-index: 100;
  background-color: @primary;
}
.header {
  position: relative;
  z-index: 0;
  .logo {
    float: left;
    height: 70px;
    img {
      padding-top: 10px;
    }
    .sub-logo{
      float: right;
      color: #fff;
      margin-top: 18px;
      line-height: 1.4;
      font-size: 22px;
      font-weight: 300;
      border-left: 2px groove #1cafef;
      padding-left: 10px;
      margin-left: 10px;
    }
  }
  .user-login {
    float: right;
    position: relative;
    color: #fff;
    padding:20px 6px;
    width:150px;
    font-size: 14px;
    height: 30px;
    line-height: 30px;
    cursor:default;
    &:hover{
      background-color: darken(@primary, 5%);
      .user-menu-list{
        display: block;
      }
    }
    .user-name{
      white-space: nowrap;
      display: inline-block;
      text-overflow: ellipsis;
      width:4em;
      vertical-align: bottom;
    }
    .user-icon{
      float: left;
      font-size: 23px;
      margin-right: 6px;
    }
    .arrow-icon{
      top:10px;
      width: 0;
      height: 0;
      border: 5px solid transparent;
      border-color: #fff transparent transparent transparent;
      border-bottom-width: 0;
    }
//    i.iconfont {
//      float: right;
//      padding-left: 8px;
//      font-size: 18px;
//      font-weight: 100;
//    }
    a {
      color: #fff;
      &:hover {
        opacity: .9;
        filter: alpha(opacity=80);
      }
    }
    .user-menu-list{
      display: none;
      position: absolute;
      top:100%;
      left:0;
      width:100%;
      background-color: rgba(0, 0, 0, .9);
      li{
        line-height:40px;
        text-align: left;
        padding:0 6px;
        a{
          display: block;
          border-top:1px dotted #3c3c3c;
          padding-left:36px;
          i.iconfont{
            margin-right:5px;
            font-weight:600;
          }
          sup{
            display: inline-block;
            background-color: @danger;
            border-radius:8px;
            height:15px;
            padding:0 4px;
            line-height: 15px;
            text-align: center;
          }

        }
        &:first-child{
          a{
            border:none;
          }
        }
        &:hover{
          background-color: rgba(0, 0, 0, .8);
        }
      }
      .um-xiaoxi-ico{
        color:@primary;
      }
      .um-exit-ico{
        color:@danger;
      }

    }
  }
}

//.header-nav {
//  padding-left: 50px;
//  float: left;
//  li {
//    .transition(all .4s);
//    float: left;
//    a {
//      display: block;
//      height: 70px;
//      line-height: 70px;
//      padding: 0 14px;
//      color: #fff;
//      font-size: 16px;
//      text-align: center;
//      transition: all .2s;
//      &:hover {
//        background-color: @primary-darken;
//      }
//    }
//  }
//}
//.mask-layer{
//  display: none;
//}